<template>
  <div>
    <div v-if="!isReject">
      <el-form
        :model="auditForm"
        :rules="auditRules"
        ref="auditForm"
        label-position="right"
        label-width="auto"
      >
        <div class="haruyuki-mt-40"></div>
        <div class="content-title">审核操作</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否通过:" prop="auditSuccess">
              <el-select
                class="haruyuki-width-100"
                size="small"
                v-model="auditForm.auditSuccess"
                placeholder="请选择是否通过"
              >
                <el-option
                  v-for="item in auditSuccessOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" v-if="auditForm.auditSuccess == '1'">
            <div class="m-t-3">
              <el-button
                type="primary"
                icon="el-icon-finished"
                size="small"
                @click="submitAudit"
                >审核</el-button
              >
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20" v-if="auditForm.auditSuccess == '2'">
          <el-col :span="7">
            <el-form-item label="驳回类型:" prop="auditType">
              <el-select
                class="haruyuki-width-100"
                size="small"
                value-key="id"
                v-model="auditForm.auditType"
                @change="selectAuditType"
                placeholder="请选择驳回类型"
              >
                <el-option
                  v-for="item in auditTypeOptions"
                  :key="item.id"
                  :label="item.dataItem"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="驳回理由:" prop="auditReason">
              <el-select
                class="haruyuki-width-100"
                size="small"
                value-key="id"
                v-model="auditForm.auditReason"
                @change="selectAuditReason"
                placeholder="请选择驳回理由"
              >
                <el-option
                  v-for="item in auditReasonOptions"
                  :key="item.id"
                  :label="item.dataItem"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="处理方式:" prop="auditWay">
              <el-select
                class="haruyuki-width-100"
                size="small"
                value-key="id"
                v-model="auditForm.auditWay"
                @change="selectAuditWay"
                placeholder="请选择处理方式"
              >
                <el-option
                  v-for="item in auditWayOptions"
                  :key="item.id"
                  :label="item.dataItem"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <div class="m-t-3">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="addRejectRecord"
                >添加</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="rejectList.length > 0 && auditForm.auditSuccess == '2'">
      <div class="content-title">驳回记录</div>
      <div class="reject-container">
        <div class="haruyuki-flex-space-around reject-header reject-bold">
          <span class="width-10"></span>
          <span class="width-30">驳回类型</span>
          <span class="width-30">驳回理由</span>
          <span class="width-30">处理方式</span>
        </div>
        <div
          class="haruyuki-flex-space-around haruyuki-width-100"
          v-for="(item, index) in rejectList"
          :key="index"
        >
          <span class="width-10 reject-bold">{{ index + 1 }}</span>
          <span class="width-30">{{ item.rejectTypeName }}</span>
          <span class="width-30">{{ item.rejectReason }}</span>
          <span class="width-30">{{ item.rejectSolution }}</span>
        </div>
        <!-- <div class="haruyuki-flex-x-end" v-if="!isReject">
          <div class="m-t-3">
            <el-button
              type="primary"
              icon="el-icon-finished"
              size="small"
              @click="submitAudit"
              >审核</el-button
            >
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRejectList,
  auditMerRecord,
} from "@/api/rb-service/merrecord/mer_change_record";
export default {
  props: {
    auditForm: Object,
    rejectList: Array,
    isReject: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      auditRules: {
      },
      auditSuccessOptions: [
        {
          dictKey: "1",
          dictValue: "是",
        },
        {
          dictKey: "2",
          dictValue: "否",
        },
      ],
      auditTypeOptions: [],
      auditReasonOptions: [],
      auditWayOptions: [],
      rejectTypeName: "",
      rejectReason: "",
      rejectSolution: "",
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.rejectList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  created() {
    if (!this.isReject) {
      this.getReject();
    }
  },
  methods: {
    /* 提交审核 */
    submitAudit() {
      if (this.auditForm.auditSuccess == "1") {
        this.getAuditMerRecord();
      } else if (this.rejectList.length > 0 && this.auditForm.auditSuccess == "2") {
        this.getAuditMerRecord();
      } else {
        if (!this.auditForm.auditType)
          return this.$message({ type: "warning", message: "请选择驳回类型!" });
        if (!this.auditForm.auditReason)
          return this.$message({ type: "warning", message: "请选择驳回理由!" });
        if (!this.auditForm.auditWay)
          return this.$message({ type: "warning", message: "请选择处理方式!" });
        if (this.rejectList.length === 0)
          return this.$message({ type: "warning", message: "请添加驳回记录!" });
      }
    },
    getAuditMerRecord() {
      const id = this.$route.query.id;
      const audit = {
        adminState: this.auditForm.auditSuccess,
        id: id,
        ids: this.ids || "",
      };
      auditMerRecord(audit).then(
        (res) => {
          this.$emit("submitAudit", res.data.code);
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "审核成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 新增驳回记录 */
    addRejectRecord() {
      if (!this.auditForm.auditType)
        return this.$message({ type: "warning", message: "请选择驳回类型!" });
      if (!this.auditForm.auditReason)
        return this.$message({ type: "warning", message: "请选择驳回理由!" });
      if (!this.auditForm.auditWay)
        return this.$message({ type: "warning", message: "请选择处理方式!" });
      this.rejectList.push({
        id: this.auditForm.auditWay.id,
        rejectTypeName: this.rejectTypeName,
        rejectReason: this.rejectReason,
        rejectSolution: this.rejectSolution,
      });
    },
    /* 驳回类型查询 */
    getReject() {
      getRejectList().then((res) => {
        this.auditTypeOptions = res.data.data;
      });
    },
    /* 选择驳回类型 */
    selectAuditType(e) {
      getRejectList(e.id).then((res) => {
        this.auditReasonOptions = res.data.data;
        this.rejectTypeName = e.dataItem;
      });
    },
    /* 选择驳回理由 */
    selectAuditReason(e) {
      getRejectList(e.id).then((res) => {
        this.auditWayOptions = res.data.data;
        this.rejectReason = e.dataItem;
      });
    },
    selectAuditWay(e) {
      this.rejectSolution = e.dataItem;
    },
  },
};
</script>

<style lang="scss" scoped>
.width-10 {
  width: 10%;
}
.width-30 {
  width: 30%;
}
.m-t-3 {
  margin-top: 3px;
}

.content-title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}

.reject-container {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 20px;
  transition: all 1s ease;
  .reject-header {
    margin-bottom: 10px;
  }
  .reject-bold {
    font-weight: bold;
  }
}
</style>